<template>
  <div>
    <mine-infinite v-model="isLoading" :isFinished="isFinished" @onLoad="getPexelsData">
      <mine-waterfall class="px-1 w-full" :data="pexelsList" nodeKey="id" :column="isMobileTerminal ? 2 : 5"
                      :picturePreReading="false">
        <template v-slot="{item,width}">
          <mine-item :data="item" :width="width" @click="onToPins"></mine-item>
        </template>
      </mine-waterfall>
    </mine-infinite>
    <!--    响应内容展示 -->
    <transition :css="false" @before-enter="beforeEnter" @enter="enter"
                @leave="leave">
      <mine-pins v-if="isVisablePins" :id="currentPins.id"></mine-pins>
    </transition>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import MineItem from './item.vue'
import {isMobileTerminal} from "@/utils/flexible";
import {useStore} from "vuex";
import MinePins from '@/views/pins/components/pins.vue'
import gsap from "gsap";
import {useEventBus, useEventListener} from "@vueuse/core";

const store = useStore()
/**
 * 构建数据请求
 */
let query = {
  page: 1,
  size: 20,
  categoryId: '',
  searchText: ''
}
// 数据是否在加载中
const isLoading = ref(false)
// 数据是否全部加载完成
const isFinished = ref(false)
// 数据源
const pexelsList = ref([])
const getPexelsData = async () => {
  // 数据全部加载完成则 return
  if (isFinished.value) {
    return
  }
  // 完成第一次请求之后，后续请求让 page 自增
  if (pexelsList.value.length) {
    query.page += 1
  }
  // 触发接口请求
  const res = {
    "list": [{
      "tags": ["all", "home", "desire", "pets"],
      "_id": "62208123fb7e8b6da85b7dfe",
      "photoLink": "https://www.pexels.com/zh-cn/photo/8051987/",
      "photo": "https://images.pexels.com/photos/8051987/pexels-photo-8051987.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@ugurcan-ozmen-61083217",
      "avatar": "https://images.pexels.com/users/avatars/61083217/ugurcan-ozmen-235.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Uğurcan Özmen",
      "photoDownLink": "https://www.pexels.com/photo/8051987/download/",
      "id": "8051987",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 625,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "food_drink", "people", "cars_motorcycles", "industrial_design", "wedding_events"],
      "_id": "62208123fb7e8b6da85b7dff",
      "photoLink": "https://www.pexels.com/zh-cn/photo/10311898/",
      "photo": "https://images.pexels.com/photos/10311898/pexels-photo-10311898.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@rodrigo-pederzini-102497840",
      "avatar": "https://images.pexels.com/users/avatars/102497840/rodrigo-pederzini-633.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Rodrigo  Pederzini",
      "photoDownLink": "https://www.pexels.com/photo/10311898/download/",
      "id": "10311898",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 625,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "kids", "people", "film_music_books", "tips"],
      "_id": "62208123fb7e8b6da85b7e00",
      "photoLink": "https://www.pexels.com/zh-cn/photo/5313576/",
      "photo": "https://images.pexels.com/photos/5313576/pexels-photo-5313576.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@stephanlouis",
      "avatar": "https://images.pexels.com/users/avatars/3470573/stephan-louis-639.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Stephan Louis",
      "photoDownLink": "https://www.pexels.com/photo/5313576/download/",
      "id": "5313576",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "games", "illustration", "sports", "funny"],
      "_id": "62208123fb7e8b6da85b7e01",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9909478/",
      "photo": "https://images.pexels.com/photos/9909478/pexels-photo-9909478.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@lenar-92376376",
      "avatar": "https://images.pexels.com/users/avatars/92376376/lenar-382.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Lenar",
      "photoDownLink": "https://www.pexels.com/photo/9909478/download/",
      "id": "9909478",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 625,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "diy_crafts", "modeling_hair", "wedding_events", "pets"],
      "_id": "62208123fb7e8b6da85b7e02",
      "photoLink": "https://www.pexels.com/zh-cn/photo/10269916/",
      "photo": "https://images.pexels.com/photos/10269916/pexels-photo-10269916.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@kassiamelox",
      "avatar": "https://images.pexels.com/users/avatars/100707831/kassia-melo-624.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Kássia Melo",
      "photoDownLink": "https://www.pexels.com/photo/10269916/download/",
      "id": "10269916",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 333,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "anime", "quotes", "design", "home", "wedding_events"],
      "_id": "62208123fb7e8b6da85b7e03",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9718332/",
      "photo": "https://images.pexels.com/photos/9718332/pexels-photo-9718332.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@soulofmurcidus",
      "avatar": "https://images.pexels.com/users/avatars/82251264/murcidus-soul-281.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Yaroslav Chaadaev",
      "photoDownLink": "https://www.pexels.com/photo/9718332/download/",
      "id": "9718332",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "apparel", "anime", "beauty", "kids"],
      "_id": "62208123fb7e8b6da85b7e04",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9437675/",
      "photo": "https://images.pexels.com/photos/9437675/pexels-photo-9437675.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@ivanxolod",
      "avatar": "https://images.pexels.com/users/avatars/73724754/ivan-xolod-423.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Ivan Xolod",
      "photoDownLink": "https://www.pexels.com/photo/9437675/download/",
      "id": "9437675",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "tips"],
      "_id": "62208123fb7e8b6da85b7e05",
      "photoLink": "https://www.pexels.com/zh-cn/photo/5702929/",
      "photo": "https://images.pexels.com/photos/5702929/pexels-photo-5702929.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@ekaterina-bolovtsova",
      "avatar": "https://images.pexels.com/users/avatars/2408093/ekaterina-bolovtsova-287.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "EKATERINA  BOLOVTSOVA",
      "photoDownLink": "https://www.pexels.com/photo/5702929/download/",
      "id": "5702929",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "wedding_events", "architecture", "illustration", "pets", "industrial_design", "tips", "anime"],
      "_id": "62208123fb7e8b6da85b7e06",
      "photoLink": "https://www.pexels.com/zh-cn/photo/8536208/",
      "photo": "https://images.pexels.com/photos/8536208/pexels-photo-8536208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@yulia-polyakova-73722901",
      "avatar": "https://images.pexels.com/users/avatars/73722901/-918.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Yulia  Polyakova",
      "photoDownLink": "https://www.pexels.com/photo/8536208/download/",
      "id": "8536208",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 667,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "men", "sports", "diy_crafts"],
      "_id": "62208123fb7e8b6da85b7e07",
      "photoLink": "https://www.pexels.com/zh-cn/photo/8957086/",
      "photo": "https://images.pexels.com/photos/8957086/pexels-photo-8957086.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@alina-kurson-80193566",
      "avatar": "https://images.pexels.com/users/avatars/80193566/alina-kurson-977.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Alina Kurson",
      "photoDownLink": "https://www.pexels.com/photo/8957086/download/",
      "id": "8957086",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 331,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "pets", "web_app_icon", "illustration", "anime"],
      "_id": "62208123fb7e8b6da85b7e08",
      "photoLink": "https://www.pexels.com/zh-cn/photo/8771023/",
      "photo": "https://images.pexels.com/photos/8771023/pexels-photo-8771023.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@79786369",
      "avatar": "https://images.pexels.com/users/avatars/79786369/-702.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Никита Семехин",
      "photoDownLink": "https://www.pexels.com/photo/8771023/download/",
      "id": "8771023",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "cars_motorcycles", "beauty"],
      "_id": "62208123fb7e8b6da85b7e09",
      "photoLink": "https://www.pexels.com/zh-cn/photo/10220774/",
      "photo": "https://images.pexels.com/photos/10220774/pexels-photo-10220774.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@plantsandgraphics",
      "avatar": "https://images.pexels.com/users/avatars/22209501/kouki-170.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Kulbir",
      "photoDownLink": "https://www.pexels.com/photo/10220774/download/",
      "id": "10220774",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 580,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "funny", "design", "diy_crafts", "film_music_books", "beauty", "people"],
      "_id": "62208123fb7e8b6da85b7e0a",
      "photoLink": "https://www.pexels.com/zh-cn/photo/3416825/",
      "photo": "https://images.pexels.com/photos/3416825/pexels-photo-3416825.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@storybyphil",
      "avatar": "https://images.pexels.com/users/avatars/1226422/phil-desforges-337.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Phil Desforges",
      "photoDownLink": "https://www.pexels.com/photo/3416825/download/",
      "id": "3416825",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "tips", "quotes"],
      "_id": "62208123fb7e8b6da85b7e0b",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9473117/",
      "photo": "https://images.pexels.com/photos/9473117/pexels-photo-9473117.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@dinnow-86001860",
      "avatar": "https://images.pexels.com/users/avatars/86001860/claudino-alves-268.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Dinnow",
      "photoDownLink": "https://www.pexels.com/photo/9473117/download/",
      "id": "9473117",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 640,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "travel_places", "funny"],
      "_id": "62208123fb7e8b6da85b7e0c",
      "photoLink": "https://www.pexels.com/zh-cn/photo/8480056/",
      "photo": "https://images.pexels.com/photos/8480056/pexels-photo-8480056.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@unlime",
      "avatar": "https://images.pexels.com/users/avatars/64456087/-473.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Nikolai Lapshin",
      "photoDownLink": "https://www.pexels.com/photo/8480056/download/",
      "id": "8480056",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 667,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "industrial_design", "art", "geek", "diy_crafts"],
      "_id": "62208123fb7e8b6da85b7e0d",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9292154/",
      "photo": "https://images.pexels.com/photos/9292154/pexels-photo-9292154.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@sashmere",
      "avatar": "https://images.pexels.com/users/avatars/1396426/sasha-prasastika-757.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Sasha Prasastika",
      "photoDownLink": "https://www.pexels.com/photo/9292154/download/",
      "id": "9292154",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 754,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "modeling_hair", "web_app_icon", "cars_motorcycles", "anime", "travel_places"],
      "_id": "62208123fb7e8b6da85b7e0e",
      "photoLink": "https://www.pexels.com/zh-cn/photo/10808067/",
      "photo": "https://images.pexels.com/photos/10808067/pexels-photo-10808067.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@fotios-photos",
      "avatar": "https://images.pexels.com/users/avatars/26735/lisa-fotios-617.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Lisa Fotios",
      "photoDownLink": "https://www.pexels.com/photo/10808067/download/",
      "id": "10808067",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 609,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "illustration", "tips", "kids", "cars_motorcycles", "industrial_design", "modeling_hair"],
      "_id": "62208123fb7e8b6da85b7e0f",
      "photoLink": "https://www.pexels.com/zh-cn/photo/10314317/",
      "photo": "https://images.pexels.com/photos/10314317/pexels-photo-10314317.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@1434506",
      "avatar": "https://images.pexels.com/users/avatars/1434506/-499.png?auto=compress&fit=crop&h=60&w=60",
      "author": "戴安娜·多瑙河",
      "photoDownLink": "https://www.pexels.com/photo/10314317/download/",
      "id": "10314317",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "desire", "kids"],
      "_id": "62208123fb7e8b6da85b7e10",
      "photoLink": "https://www.pexels.com/zh-cn/photo/9912164/",
      "photo": "https://images.pexels.com/photos/9912164/pexels-photo-9912164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@klaudia-ekert-1198089",
      "avatar": "https://images.pexels.com/users/avatars/1198089/klaudia-ekert-203.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "Klaudia Ekert",
      "photoDownLink": "https://www.pexels.com/photo/9912164/download/",
      "id": "9912164",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 750,
      "photoType": "jpg",
      "__v": 0
    }, {
      "tags": ["all", "wedding_events", "men", "cars_motorcycles", "travel_places", "sports"],
      "_id": "62208123fb7e8b6da85b7e11",
      "photoLink": "",
      "photo": "https://images.pexels.com/videos/8871287/pexels-photo-8871287.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "authorLike": "https://www.pexels.com/zh-cn/@3525678",
      "avatar": "https://images.pexels.com/users/avatars/3525678/-897.jpeg?auto=compress&fit=crop&h=60&w=60",
      "author": "宇航 钱",
      "photoDownLink": "https://www.pexels.com/zh-cn/video/8871287/download/",
      "title": "图片数据来自 pexels ",
      "photoWidth": 500,
      "photoHeight": 889,
      "photoType": "jpg",
      "__v": 0
    }], "total": 533, "page": "1", "size": "20"
  }
  // 初始请求清空数据源
  if (query.page === 1) {
    pexelsList.value = res.list
  } else {
    pexelsList.value.push(...res.list)
  }
  // 判断数据是否全部加载完成
  if (pexelsList.value.length === res.total) {
    isFinished.value = true
  }
  // 修改 loading 标记
  isLoading.value = false
}

/**
 * 监听currentCategory变化
 */
watch(() => store.getters.currentCategory, (currentCategory) => {
  resetQuery({
    page: 1,
    categoryId: currentCategory.id
  })
})

/**
 * 通过此方法修改 query 请求参数，重新发起请求
 */
const resetQuery = (newQuery) => {
  query = {...query, ...newQuery}
  // 重置状态
  isFinished.value = false
  pexelsList.value = []
}
getPexelsData()
/**
 * 控制pins展示
 */
const isVisablePins = ref(false)
//当前选中的pins属性
const currentPins = ref({})
/**
 * 进入pins
 */
const onToPins = (item) => {
  //修改浏览器的url
  history.pushState(null, null, `/pins/${item.id}`)
  isVisablePins.value = true
  currentPins.value = item
  console.log(item)
}

const beforeEnter = (el) => {
  gsap.set(el, {
    scaleX: 0,
    scaleY: 0,
    transformOrigin: '0 0',
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY,
    opacity: 0
  })
}

const enter = (el, done) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 1,
    scaleY: 1,
    opacity: 1,
    translateX: 0,
    translateY: 0,
    onComplete: done
  })
}

const leave = (el, done) => {
  gsap.to(el, {
    duration: 0.3,
    scaleX: 0,
    scaleY: 0,
    opacity: 0,
    translateX: currentPins.value.location?.translateX,
    translateY: currentPins.value.location?.translateY,
    onComplete: done
  })
}

useEventListener(window,'popstate',() => {
  isVisablePins.value = false
})

</script>
